<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80px" />
      <el-table-column prop="name" label="渠道名称" />
      <el-table-column prop="companyName" label="渠道公司名称" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" size="mini" type="primary" plain>编辑</el-button>
          <el-button @click="del(row)" size="mini" type="danger" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialog.type === 1 ? '新增产品渠道' : '编辑产品渠道'" width="480px" :visible.sync="dialog.visible" :close-on-click-modal="false">
      <el-form ref="form" :model="dialog" :rules="rules" label-width="90px">
        <el-form-item label="渠道名称:" prop="content.name">
          <el-input v-model="dialog.content.name"></el-input>
        </el-form-item>
        <el-form-item label="公司名称:" prop="content.companyName">
          <el-input v-model="dialog.content.companyName"></el-input>
        </el-form-item>
      </el-form>
      <div class="d-flex justify-center">
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  updateProductChannel,
  addProductChannel,
  deleteProductChannel,
} from "@/api/product";
export default {
  name: "ChannelTable",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    channelList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialog: {
        visible: false,
        type: 1,
        content: {
          id: "",
          name: "",
          companyName: "",
        },
      },
      rules: {
        "content.name": [
          {
            required: true,
            message: "渠道名称不能为空",
            trigger: "blur",
          },
        ],
        "content.companyName": [
          {
            required: true,
            message: "渠道公司不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "dialog.visible": {
      handler(val) {
        if (val) return;
        this.dialog = {
          visible: false,
          type: 1,
          content: {
            id: "",
            name: "",
            companyName: "",
          },
        };
      },
    },
  },
  methods: {
    edit(row) {
      const content = {};
      Object.keys(this.dialog.content).forEach((key) => {
        content[key] = row[key];
      });
      this.dialog = {
        visible: true,
        type: 2,
        content,
      };
    },
    async handleConfirm() {
      const valid = await this.$refs["form"].validate();
      if (!valid) return;
      const { type } = this.dialog;
      type === 1 ? this.addProductChannel() : this.updateProductChannel();
    },
    async updateProductChannel() {
      const res = await updateProductChannel(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.$parent.getProductChannelList();
      this.$message.success("编辑产品渠道成功!");
    },
    async addProductChannel() {
      const res = await addProductChannel(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.$parent.page.page = 1;
      this.$parent.getProductChannelList();
      this.$message.success("添加产品渠道成功!");
    },
    del({ id }) {
      console.log("handleDelete");
      this.$confirm("是否确定删除产品渠道?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteChannel(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async deleteChannel(id) {
      console.log(id);
      const { code } = await deleteProductChannel({ id });
      if (code !== 200) return;
      this.$message.success("删除成功");
      this.$parent.getProductChannelList();
    },
  },
};
</script>
